<template>     
    <el-form v-show="visible" label-width="100px">
        <!-- spu名称 -->
        <el-form-item label="SPU名称">
            <el-input type="text" placeholder="请输入SPU名称"  v-model="spuInfo.spuName"></el-input>
        </el-form-item>
        <!-- spu品牌 -->
        <el-form-item label="SPU品牌">
            <el-select placeholder="请选择SPU品牌" v-model="spuInfo.tmId">
                <el-option label="小米" value="1"></el-option>
                <el-option label="苹果" value="2"></el-option>
            </el-select>
        </el-form-item>
        <!-- spu描述 -->
        <el-form-item label="SPU描述">
            <el-input type="textarea"  rows="4" placeholder="请输入SPU描述信息"  v-model="spuInfo.description"></el-input>
        </el-form-item>
        <!-- spu图片 -->
        <el-form-item label="SPU图片">
            <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                >
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>               
                <i class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <!-- 销售属性 -->
        <el-form-item label="销售属性">
            <el-select placeholder="请选择销售属性" v-model="attrIdAttrName">
                <el-option label="颜色" value="1"></el-option>
                <el-option label="版本" value="2"></el-option>                
            </el-select>
            <el-button type="primary" icon="el-icon-plus">添加销售属性</el-button>
        </el-form-item>
        <!-- 表格 -->
        <el-form-item >
            <el-table  :data="[]" border stripe style="width: 100%" >
                <el-table-column  type="index"   label="序号"  width="80" align="center">                    
                </el-table-column>
            <el-table-column  prop="spuName" label="属性名"></el-table-column>
            <el-table-column  prop="description" label="属性值名称列表" ></el-table-column>
            <el-table-column   label="操作">
                <template slot-scope="{row,$index}">                   
                    <el-popconfirm style="margin-left:10px" :title="`您确定删除 吗？`" @onConfirm="deleteVal($index)">
                         <HintButton title="删除属性值" size="mini"  type="danger" icon="el-icon-delete" slot="reference" />
                    </el-popconfirm>                    
                </template> 
            </el-table-column>
           </el-table> 
            
        </el-form-item>
        <!-- 两个按钮 -->
        <el-form-item >
           <el-button type="primary" @click="back">保存</el-button>
        <el-button type="primary">取消</el-button>
        </el-form-item>
        
    </el-form>
 
</template>

<script>
  export default {
      name:'SpuForm',
      props:['visible'],
      data(){
          return{
              spuId:'',//spuId的数据，是修改spuInfo对象的时候传递进来的
              spuInfo:{
                  spuName:'',//spuInfo对象的名字
                  description:'',//spuInfo对象描述信息
                  category3Id:'',//三级分类id值
                  tmId:'',//品牌的Id
                  spuSaleAttrList:[],//spuInfo对象中的销售属性数组数据
                  spuImageList:[]
              },
              trademarkList:[],//所有品牌列表数据
              saleAttrList:[],//所有销售属性数据
              spuImageList:[],//所有图片列表数据              
              attrIdAttrName:'',//用来储存选中的销售属性的id和名字的
              //上传图片所需要的表达式
            dialogImageUrl:'',
            dialogVisible: false,
            fileList: [
                {
                    name: 'food.jpeg', 
                    url: ''
                }
            ],
          }
      },
      methods: {
          //取消
          back(){
              this.$emit('update:visible',false)
          },
          //修改spuInfo对象的初始化的相关方法
          initUpdateData(spuId){
              this.spuId = spuId
              console.log(this.spuId)
              //1,根据spuid获取对应的spuidinfo对象的数据
              this.getSpuInfo()
              //2.获取所有品牌信息
              this.getTrademarkList()
              //3.获取销售属性数据
              this.getSaleAttrList()
              //4.获取当前的spuInfo对象中的所有图片信息数据
              this.getSpuImgageList()
          },
          //1.根据spuId获取的对应的spuInfo对象数据
          async getSpuInfo(){
              const result = await this.$API.spu.getSpuInfoById(this.spuId)
              //需要判断成功与否，简写
              this.spuInfo = result.data
          },
          //2获取所有品牌数据
          async getTrademarkList(){
              const result = await this.$API.trademark.getTrademarkList()
                console.log(result)
              this.trademarkList = result.data
          },
          //3.获取所有的销售属性数据
          async getSaleAttrList(){
             const result = await this.$API.spu.getBaseSaleAttrList()
          
              this.saleAttrList = result.data
          },
          //4，获取当前的spuInfo对象中所有的图片信息数据
          async getSpuImgageList(){
              const result = await this.$API.sku.getSpuImageList(this.spuId)
               
              //更新数据
              const spuImageList = result.data
              this.spuImageList = spuImageList
          },
          //上传图片做需要的回调函数
          handleRemove(file, fileList) {
          console.log(file, fileList);
          },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
           //上传图片上传成功的回调函数
         handleAvatarSuccess(res, file) {
             //此时图片上传成功，立刻把对应的图片地址保存起来
            //  console.log(res)
            if(res.code==200){
              this.formData.logoUrl = res.data
              //如果图片上传成功了，那么应该清理掉之前表单验证的提示信息
              this.$refs.formData.clearValidate('logoUrl')
            }
      
      }, 
      //上传图片之前的回调
      beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        //限定图片上传格式
        const isJPG = ['image/jpeg','image/png'].includes(file.type);
        // console.log(file)
        //限制图片大小
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传品牌图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传品牌图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      },
  }
</script>

<style scoped>
  
</style>